.passengers-sidebar {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1px;
  background-color: transparent;
}

.passengers-sidebar__header, 
.passengers-sidebar__footer {
  width: 100%;
  text-align: center;
  padding: 35px 0;
  font-size: 30px;
  color: var(--color-white);
  text-transform: uppercase;
  background-color: #3E3C41;
}

.passengers-sidebar__details {
  width: 100%;
  padding: 20px 25px;
  background-color: #3E3C41;
}

.passengers-sidebar__details-control {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  text-transform: capitalize;
}

.details-control__title {
  font-size: 30px;
  font-weight: 700;
  color: var(--color-white);
}

.details-control__time {
  font-size: 18px;
  color: var(--color-white);
  align-self: flex-start;
  margin-top: 14px;
}

.details-control-btn,
.details-control-btn + label ~ div {
  display: none;
}

.details-control-btn + label {
  display: block;
  margin-left: auto;
  cursor: pointer;
}

.details-control-btn:checked + label + div {
  flex: 100%;
  display: block; 
  -webkit-animation:fade 0.5s ease-in-out; 
  -moz-animation:fade 0.5s ease-in-out;
  animation:fade 0.5s ease-in-out; 
}

@-moz-keyframes fade {
  from { opacity: 0; }
  to { opacity: 1 }
}
@-webkit-keyframes fade {
  from { opacity: 0; }
  to { opacity: 1 }
}
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1 }   
}

.details-control-btn + label::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.2218 4.20293L9.2218 9.18841L4.23632 9.18841C3.77255 9.18841 3.42473 9.53623 3.42473 10C3.42473 10.4638 3.77255 10.8116 4.23632 10.8116L9.2218 10.8116L9.2218 15.7971C9.2218 16.2608 9.56962 16.6087 9.97542 16.5507L10.0914 16.5507C10.5551 16.5507 10.9029 16.2029 10.845 15.7971V10.8116H15.7145C16.1783 10.8116 16.5261 10.4638 16.5261 10C16.5261 9.53623 16.1783 9.18841 15.7145 9.18841H10.845V4.20293C10.845 3.73917 10.4972 3.39134 10.0914 3.44931L9.97542 3.44931C9.51165 3.44931 9.16383 3.79714 9.2218 4.20293Z' fill='white'/%3E%3Crect x='1' y='1' width='18' height='18' rx='4' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.details-control-btn + label:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.2218 4.20293L9.2218 9.18841L4.23632 9.18841C3.77255 9.18841 3.42473 9.53623 3.42473 10C3.42473 10.4638 3.77255 10.8116 4.23632 10.8116L9.2218 10.8116L9.2218 15.7971C9.2218 16.2608 9.56962 16.6087 9.97542 16.5507L10.0914 16.5507C10.5551 16.5507 10.9029 16.2029 10.845 15.7971V10.8116H15.7145C16.1783 10.8116 16.5261 10.4638 16.5261 10C16.5261 9.53623 16.1783 9.18841 15.7145 9.18841H10.845V4.20293C10.845 3.73917 10.4972 3.39134 10.0914 3.44931L9.97542 3.44931C9.51165 3.44931 9.16383 3.79714 9.2218 4.20293Z' fill='%23FCDC9D'/%3E%3Crect x='1' y='1' width='18' height='18' rx='4' stroke='%23FCDC9D' stroke-width='2'/%3E%3C/svg%3E%0A");
}

.details-control-btn:checked + label::before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='18' height='18' rx='4' stroke='%23C4C4C4' stroke-width='2'/%3E%3Cline x1='5.61523' y1='9.76929' x2='14.3845' y2='9.76929' stroke='%23C4C4C4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.details-content__info {
  margin-top: 20px;
  color: var(--color-white);
}

.details-content__info-train-num, 
.details-content__info-train-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  margin-bottom: 20px;
}

.details-content__info-train-name {
  align-items: flex-start;
}

.details-content__info-num {
  font-size: 24px;
  font-weight: 700;
}

.details-content__info-name {
  text-align: end;
}

.details-content__info-period {
  text-align: center;
  font-size: 18px;
}

.details-content__info-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-time__time {
  font-size: 24px;
  font-weight: 700;
}

.info-period__arrow {
  width: 30px;
  height: 30px;
  margin: 0 auto;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.info-period__arrow.arrow-right {
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='20' viewBox='0 0 30 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.3627 20C19.3627 17.8073 19.3627 15.3821 19.3627 12.8239C12.8621 12.8239 6.46582 12.8239 0 12.8239C0 11.0299 0 9.36877 0 7.57475C6.32677 7.57475 12.7231 7.57475 19.3279 7.57475C19.3279 4.91694 19.3279 2.42525 19.3279 0C22.9432 3.3887 26.5238 6.77741 30 10.0664C26.5585 13.2558 22.9432 16.6445 19.3627 20Z' fill='%23FFA800'/%3E%3C/svg%3E%0A");
}

.info-period__arrow.arrow-left {
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='20' viewBox='0 0 30 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6373 20C10.6373 17.8073 10.6373 15.3821 10.6373 12.8239C17.1379 12.8239 23.5342 12.8239 30 12.8239C30 11.0299 30 9.36877 30 7.57475C23.6732 7.57475 17.2769 7.57475 10.6721 7.57475C10.6721 4.91694 10.6721 2.42525 10.6721 0C7.05678 3.3887 3.47625 6.77741 1.90735e-06 10.0664C3.44148 13.2558 7.05678 16.6445 10.6373 20Z' fill='%23FFA800'/%3E%3C/svg%3E%0A");
}

.details-content__info-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-date__date {
  font-size: 18px;
  color: var(--color-grey);
}

.details-content__info-city, 
.details-content__info-station {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.details-content__info-city {
  margin-top: 20px;
}

.info-city__city {
  font-size: 18px;
}

.info-station__station {
  font-size: 16px;
  color: var(--color-grey);
}

.passengers-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #E5E5E5;
  font-size: 18px;
  margin-bottom: 20px;
}

.passengers-info__count {
  margin-left: 5px;
}

.passengers-info__total-cost {
  margin-left: auto;
  font-size: 24px;
}

.passengers-info__adult-total-cost, 
.passengers-info__kid-total-cost {
  margin-right: 5px;
  font-weight: 700;
  color: var(--color-white);
}

.passengers-sidebar__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 25px 30px;
}

.footer-total-cost__title {
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-white);
}

.footer-total-cost__total-cost {
  font-size: 48px;
  color: var(--color-white);
}

.footer-total-cost__total-cost-count {
  font-weight: 700;
  color: var(--color-orange);
  margin-right: 10px;
}